import React from "react";
import "./morevideo.css"
import { Link,useNavigate } from "react-router-dom"
import { getFoodipData, getOffspringData,getHealthData } from "../../api/home"
import { Tabs } from 'antd-mobile'

function Morevideo() {
    let navigate = useNavigate();//链接跳转
    let [foodip, setFoodip] = React.useState(null);
    let [offspring, setOffspring] = React.useState(null);
    let [health, setHealth] = React.useState(null);

    React.useEffect(() => {
    //请求数据 foodip

        getFoodipData().then(data => {
            setFoodip(data.data.albums)
            console.log(data.data.albums);
        })
    //请求数据 Offspring

        getOffspringData().then(data => {
            setOffspring(data.data.albums)
            console.log(data.data.albums);
        })
    //请求数据 Health

        getHealthData().then(data => {
            setHealth(data.data.albums)
                console.log(data.data.albums);
            })
    }, [])






    return (
        <div className="morevideo">
            <div className="top">
                <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                <div className="title">
                    精美优质IP视频
                </div>
                <i className="iconfont icon-sort"></i>

            </div>

            <div className="content">
                <Tabs>
                    <Tabs.Tab title='美食IP' key='fruits'>
                        <ul>
                            {
                                foodip && foodip.map(item => {
                                    return (
                                        <li key={item.album_id}>
                                            <Link to={"/detailsuser/" + item.album_id}>
                                                <div className="img">
                                                    <img src={item.album_logo} />
                                                </div>
                                                <p className="name text_row_hidden">{item.album}</p>
                                            </Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </Tabs.Tab>
                    <Tabs.Tab title='健康IP' key='vegetables'>
                        <ul>
                            {
                                health && health.map(item => {
                                    return (
                                        <li key={item.album_id}>
                                            <Link to={"/detailsuser/" + item.album_id}>
                                                <div className="img">
                                                    <img src={item.album_logo} />
                                                </div>
                                                <p className="name text_row_hidden">{item.album}</p>
                                            </Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </Tabs.Tab>
                    <Tabs.Tab title='亲子IP' key='animals'>
                        <ul>
                            {
                                offspring && offspring.map(item => {
                                    return (
                                        <li key={item.album_id}>
                                            <Link to={"/detailsuser/" + item.album_id}>
                                                <div className="img">
                                                    <img src={item.album_logo} />
                                                </div>
                                                <p className="name text_row_hidden">{item.album}</p>
                                            </Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </Tabs.Tab>
                </Tabs>
            </div>
        </div >
    )
}

export default Morevideo;